<template>
  <view class="main">
    <NavBar title="管理员设置" :fixed="true" right-text="新增" @onClickRight="isShowSearch = true" />
    <van-search v-model="keyword" placeholder="搜索" shape="round" v-if="isShowSearch" />
    <view class="item-box">
      <view class="item" v-for="(item, index) in getArrayList" :key="index">
        <view class="user-box dispaly-just-between">
          <view class="user-left dispaly-just-between">
            <view class="user-avatar" @click.stop="
              $goUrl(`/pages/index/pages/businessCard?id=${item?.userId}`)
              ">
              <image :src="item?.avatar" mode="aspectFill" />
            </view>
            <view class="user-info-box" @click.stop="handleAction(item, index)">
              <view class="user-info-top dispaly-line-center">
                <view class="time">{{ item?.nickName }}</view>
                <view class="name">{{ item?.department }}</view>
                <view class="job-name" v-if="item?.company">({{ item?.company }})</view>
              </view>
              <view class="tel dispaly-center">
                <view class="tel-number">{{ item?.phonenumber }}</view>
              </view>
            </view>
          </view>
          <view class="option dispaly-align-center">
            <view class="job" v-if="item?.isAdmin == 1">群主</view>
            <view class="job" v-if="item?.isGroup == 1">管理员</view>
            <view class="job" v-if="item?.isGroup != 1 && item?.isAdmin != 1">普通成员</view>
          </view>
        </view>
      </view>
      <LoadMore />
    </view>
  </view>
  <!-- 管理 -->
  <van-action-sheet v-model:show="manageShow" :actions="manageActions" @select="manageOnSelect" cancel-text="取消"
    @cancel="manageShow = false" />

  <!-- 设为管理员 -->
  <van-action-sheet v-model:show="setManageShow" :actions="setManageActions" @select="setManageOnSelect"
    cancel-text="取消" @cancel="setManageShow = false" />

  <van-popup v-model:show="showSetting" round>
    <view class="pop-main">
      <view class="set-item dispaly-just-between" v-for="(item, index) in settingList" :key="index">
        <view class="name">{{ item.name }}</view>
        <view class="sel-w dispaly-align-center" @click="setListChange(item)">
          <view class="sel-n" v-if="item.isSelect"></view>
        </view>
      </view>
    </view>
    <view class="confirm dispaly-align-center" @click="confirm">确定</view>
  </van-popup>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  getMemberPage,
  setAdmin,
  getWriteFillList,
  setPower,
  power
} from "@/api/apiList";
import { watch } from "vue";
const getIDs = ref();
onLoad((e) => {
  if (e && e?.id) {
    getIDs.value = e?.id;
    getMember(e?.id);
  }
});
const showSetting = ref(false);

const settingList = ref([]);

const getWriteList = async () => {
  const response = await getWriteFillList("/power_type");
  if (response && response?.code == 200) {
    response?.data.map((items) => {
      settingList.value.push({
        name: items?.dictLabel,
        ...items,
        isSelect: false,
      });
    });
  }
};
getWriteList();

const isShowSearch = ref(false);

const keyword = ref("");
// 管理
const manageShow = ref(false);
const manageActions = ref([
  { name: "管理员权限设置", type: 1 },
  { name: "取消管理员", type: 2 },
]);

const manageOnSelect = async (data) => {
  const { type } = data;
  switch (type) {
    case 1:
      showSetting.value = true;
      break;
    case 2:
      manageShow.value = false;
      showSetting.value = false;
      uni.showModal({
        title: "取消管理员",
        content: "是否取消该管理员",
        success: async (response) => {
          if (response?.confirm) {
            const response = await setAdmin({ id: adminIds.value, isGroup: 0 });
            if (response && response?.code == 200) {
              uni.showToast({
                title: "取消管理员成功",
                icon: "none",
              });
              getMember(getIDs.value, "");
            }
          } else {
            uni.showToast({
              title: "取消",
              icon: "none",
            });
          }
        },
      });
      break;
  }
};

// 点击用户
const adminIds = ref();
const handleAction = (item, index) => {
  adminIds.value = item?.id;
  if (item.isAdmin != 1) {
    console.log(item);
    if (item?.isGroup == 1) {
      manageShow.value = true;
    } else {
      setManageShow.value = true;
    }
  }

};

// 设为管理员
const setManageShow = ref(false);
const setManageActions = ref([{ name: "设为管理员", type: 1 }]);

const setManageOnSelect = (data) => {
  console.log(data);
  setManageShow.value = false;
  uni.showModal({
    title: "设置管理员",
    content: "是否设置该管理员",
    success: async (response) => {
      if (response?.confirm) {
        const response = await setAdmin({ id: adminIds.value, isGroup: 1 });
        if (response && response?.code == 200) {
          uni.showToast({
            title: "设置管理员成功",
            icon: "none",
          });
          getArrayList.value = [];
          getMember(getIDs.value, "");
        }
      } else {
        uni.showToast({
          title: "取消",
          icon: "none",
        });
      }
    },
  });
};

const getArray = ref([]);
const setListChange = (parms) => {
  //   console.log(parms);

  return (
    (parms.isSelect = !parms.isSelect),
    parms?.isSelect == true
      ? getArray.value.push({
        memberId: adminIds.value,
        typeId: parms?.dictCode,
      })
      : ""
  );
};

// 分配权限
const confirm = async () => {
  showSetting.value = false;
  const response = await power({
    id: adminIds.value,
    power: getArray.value,
    circleId: getIDs.value
  });

  if (response && response?.code == 200) {
    uni.showToast({
      title: "权限分配成功",
      icon: "none",
    });
    showSetting.value = false;
    manageShow.value = false
    getArrayList.value = [];
    getMember(getIDs.value, "");
  }
};

const getArrayList = ref();
const getMember = async (Ids, origin) => {
  const response = await getMemberPage({
    type: 0,
    circleId: Ids,
    search: origin,
  });
  if (response && response?.code == 200) {
    getArrayList.value = response?.rows;
  }
};

watch(keyword, (origin) => {
  if (origin) {
    getArrayList.value = [];
    getMember(getIDs.value, origin);
  }
});
</script>

<style lang="scss" scoped>
:deep(.van-action-sheet__name) {
  color: #0753fd;
}

.item {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #ddd;

  .user-box {
    .user-left {
      .user-avatar {
        margin-right: 20rpx;

        image {
          width: 104rpx;
          height: 104rpx;
          border-radius: 50%;
        }
      }
    }

    .option {
      font-family: PingFang SC Regular;
      font-size: 22rpx;
      color: #aaaaaa;

      .job {
        font-family: PingFang SC Medium;
        font-size: 22rpx;
        color: #ffffff;
        background: #0753fd;
        padding: 4rpx 8rpx;
        border-radius: 8rpx;
      }

      .i-one {
        margin-right: 40rpx;
      }

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .user-info-box {
      .tel {
        .tel-number {
          font-family: PingFang SC Regular;
          font-size: 22rpx;
          font-weight: normal;
          color: #777777;
          margin-right: 8rpx;
        }

        .type {
          font-family: PingFang SC Regular;
          font-size: 22rpx;
          color: #0753fd;
        }
      }

      .user-info-top {
        .name {
          font-family: PingFang SC Regular;
          font-size: 24rpx;
          color: #111111;
          margin: 0 8rpx;
        }

        .job-name {
          font-family: PingFang SC Regular;
          font-size: 24rpx;
          color: #999999;
        }
      }

      .time {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        font-weight: 700;
        color: #111;
      }
    }
  }
}

.pop-main {
  padding: 56rpx 40rpx;
  width: 560rpx;

  .set-item:last-child {
    margin-bottom: 0;
  }

  .set-item {
    margin-bottom: 52rpx;

    .name {
      font-family: PingFang SC Medium;
      font-size: 32rpx;
      color: #111111;
    }

    .sel-w {
      width: 34rpx;
      height: 34rpx;
      box-sizing: border-box;
      border: 1rpx solid #999999;
      border-radius: 50%;

      .sel-n {
        width: 26rpx;
        height: 26rpx;
        background-color: #0753fd;
        border-radius: 50%;
      }
    }
  }
}

.confirm {
  border-top: 1rpx solid #eee;
  padding: 30rpx 0;
  font-family: PingFang SC Medium;
  font-size: 34rpx;
  color: #0753fd;
}
</style>
